<template>
    <Teleport to="#message">
        <div class="alert alert-dismissible fade show fixed-top w-50 mx-auto" :class="classObj" v-if="isVisible">
            <span>{{ message }}</span>
            <button type="button" class="btn-close" aria-label="Close" @click.prevent="onClose"></button>
        </div>
    </Teleport>
</template>

<script setup lang="ts">
import { PropType, ref } from 'vue'
import useDOMCreate from '../hooks/useDOMCreate'

export type MessageType = 'success' | 'info' | 'warning' | 'danger'
const props = defineProps({
    message: String,
    type: {
        type: String as PropType<MessageType>,
        default: 'success'
    }
})

const emitter = defineEmits(['close-message'])
useDOMCreate('message')
const isVisible = ref(true)
const classObj = {
    'alert-success': props.type === 'success',
    'alert-danger': props.type === 'danger',
    'alert-warning': props.type === 'warning',
    'alert-info': props.type === 'info',
}
const onClose = () => {
    isVisible.value = false
    emitter('close-message', true)
}
</script>